import React, { useEffect, useState } from 'react';
import { Button, Upload } from 'antd'
import GetInfo from './GetInfo';
import 'antd/dist/antd.css';

const LuckySheetComponent = () => {
  const [luckysheetfile, setLuckysheetfile] = useState({})
  console.log(window.luckysheet,'1212')

  useEffect(() => {
  // export default sheetDataVerification;
        window.luckysheet.create({
          container: 'luckysheet', //luckysheet is the container id
          showinfobar:false,
          lang: 'zh',
          // data:exportJson.sheets,
          // title:exportJson.info.name,
          // userInfo:exportJson.info.name.creator
        });
  },[])

  const luckyCss = {
    margin: '0px',
    padding: '0px',
    position: 'absolute',
    width: '100%',
    height: 'calc(100% - 80px)',  // 留出 60px 给按钮,
    left: '0px',
    top: '80px'
}


const props = {
  onChange(info) {
    console.log(info,'info')
    handleFileChange(info.file.originFileObj)
  },
};

const handleFileChange = (e) => {
  const file = e.target.files[0];
  // const file = e

  if (!file) {
      return;
  }
  // console.log(file, 'file[0]');

  window.LuckyExcel.transformExcelToLucky(file, function (exportJson, luckysheetfile) {
      console.log(exportJson, 'exportJson');
      console.log(luckysheetfile,'luckysheetfileluckysheetfile')
      setLuckysheetfile(exportJson)

      if (exportJson.sheets === null || exportJson.sheets.length === 0) {
          alert("Failed to read the content of the excel file, currently does not support xls files!");
          return;
      }
      window.luckysheet.destroy();

      window.luckysheet.create({
          container: 'luckysheet', //luckysheet is the container id
          showinfobar: false,
          lang: 'zh',
          allowUpdate:true,
          data: exportJson.sheets,
          // title: exportJson.info.name,
          // userInfo: exportJson.info.name.creator
      });
  });
};

/*
 <input type="file" accept=".xlsx" style={{
      position: "absolute",
      left: "400px",
      top: "16px",
      zIndex: 999,
      color: '#333'
  }} onChange={handleFileChange} />
*/

  return (<>
    <div style={{width:'100%',height:'50px',boxSizing:'border-box',padding:'10px 20px',display:'flex',justifyContent:'flex-start'}}>
      {/* <Upload {...props}>
        <Button type='primary'>上传</Button>
      </Upload> */}

      <input type="file" accept=".xlsx" style={{
          zIndex: 999,
          color: '#333'
      }} onChange={handleFileChange} />

      <GetInfo excelInfo={luckysheetfile}></GetInfo>
    </div>
   
      <div
      id="luckysheet"
      style={luckyCss}
      ></div>  
    </>
    
);
};

export default LuckySheetComponent;

